<template>
    <el-menu :default-active="state.activeMenu" @select="onSelect" v-if="userInfo.isLogin()">

        <MenuSub :menus="memberCenter.state.navUserMenus" :show-icon="true" />
        <div class="header-user-box">
            <img class="header-user-avatar" :class="$attrs.mode == 'vertical' ? 'icon-header-user-avatar' : ''"
                :src="fullUrl('/static/images/avatar.png')" alt="" />
            {{ userInfo.name }}
        </div>
        <div class="header-user-box" style="margin-left: 20px;cursor: pointer;" @click="userInfo.logout()">

            退出登录
        </div>

    </el-menu>
</template>

<script setup lang="ts">
import { nextTick, reactive, watch } from 'vue'
import { editDefaultLang } from '/@/lang/index'
import { useConfig } from '/@/stores/config'
import { useUserInfo } from '/@/stores/userInfo'
import { useSiteConfig } from '/@/stores/siteConfig'
import { useMemberCenter } from '/@/stores/memberCenter'
import { fullUrl } from '/@/utils/common'
import MenuSub from '/@/layouts/merchant/components/menuSub.vue'
import toggleDark from '/@/utils/useDark'
import DarkSwitch from '/@/layouts/common/components/darkSwitch.vue'
import { useRoute, useRouter } from 'vue-router'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'

const route = useRoute()
const router = useRouter()
const config = useConfig()
const userInfo = useUserInfo()
const siteConfig = useSiteConfig()
const memberCenter = useMemberCenter()

interface Props {
    showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    showIcon: false,
})

const state = reactive({
    activeMenu: '',
})

const findMenu = (route: RouteLocationNormalizedLoaded) => {

    for (const key in memberCenter.state.navUserMenus) {

        if (memberCenter.state.navUserMenus[key].path == route.path || memberCenter.state.navUserMenus[key].name == route.name) {
            return memberCenter.state.navUserMenus[key].meta?.id
        }
    }
    for (const key in siteConfig.headNav) {
        if (siteConfig.headNav[key].path == route.path || siteConfig.headNav[key].name == route.name) {
            return siteConfig.headNav[key].meta?.id
        }
    }
}

const setActiveMenu = (route: RouteLocationNormalizedLoaded) => {
    if (route.path == '/') return (state.activeMenu = 'index')
    // 动态菜单
    const menuId = findMenu(route)

    if (menuId) {
        state.activeMenu = route.path
    } else if (route.path.startsWith('/merchant')) {
        state.activeMenu = route.path
    }


}
setActiveMenu(route)

const onSelect = (index: string) => {
    /**
     * 当动态菜单被点击时
     * 检查该菜单是否需要激活，如果否，还原 state.activeMenu
     */
    if (noNeedActive(siteConfig.headNav, index) || noNeedActive(memberCenter.state.navUserMenus, index)) {
        const oldActiveMenu = state.activeMenu
        state.activeMenu = ''
        nextTick(() => {
            state.activeMenu = oldActiveMenu
        })
    }
}

/**
 * 检查一个菜单是否需要激活态
 * @param menus
 * @param index
 */
const noNeedActive = (menus: RouteRecordRaw[], index: string) => {
    if (index.indexOf('language-switch') === 0 || index == 'theme-switch') {
        return true
    }
    return isExternalLink(menus, index)
}

/**
 * 检查一个菜单是否是外站链接，如果是，不要激活
 * @param menus
 * @param index
 */
const isExternalLink = (menus: RouteRecordRaw[], index: string): boolean => {
    for (const key in menus) {
        const columnIndex = `column-${menus[key].meta?.id}`
        if (columnIndex == index) {
            return menus[key].meta?.menu_type == 'link'
        }
        if (menus[key].children?.length) {
            return isExternalLink(menus[key].children!, index)
        }
    }
    return false
}

watch(
    () => route.path,
    () => {
        setActiveMenu(route)
    }
)
</script>

<style scoped lang="scss">
.header-user-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .header-user-avatar {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        border-radius: 50%;
    }

    .icon-header-user-avatar {
        margin-left: 4px;
        margin-right: 6px;
    }
}

.el-sub-menu .icon,
.el-menu-item .icon {
    vertical-align: middle;
    margin-right: 2px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.is-active>.icon {
    color: var(--el-menu-active-color) !important;
}

.el-menu {
    border-bottom: none;
    border-right: none;

    .theme-switch.is-active,
    .language-switch.is-active {
        border-bottom: none;

        :deep(.el-sub-menu__title) {
            border-bottom: none;
        }
    }
}

.theme-switch {
    --el-menu-hover-bg-color: none;
    padding-right: 0;
}

.vertical-theme-switch {
    .theme-toggle-content {
        padding: 0;
    }
}

.theme-toggle-content {
    padding-right: 0;
}
</style>
